<template>
	<view>
		<view class="page_title">
		  <nav-back></nav-back>
		  <view class="page_name">我的牵线</view>
		  <view class="blank"></view>
		</view>
		
		<view class="banxin">
		  <view class="ways">
		    <view class="way" :class="activeWay=='to' ? 'active' : ''"
		    @click="handleWays('to')">
		      我申请的牵线
		    </view>
		    <view class="way" :class="activeWay=='come' ? 'active' : ''"
		    @click="handleWays('come')">
		      向我申请的牵线
		    </view>
		  </view>
		  <scroll-view scroll-y class="scroll" :refresher-enabled="true" :refresher-triggered="isTrigger"
			@refresherrefresh="handleRefresh" refresher-background='tranparent'>
		    <view class="service_list">
		      <view class="service_item" v-for="item in stringList">
		        <view class="apply_time">
		          <view class="point"></view>
		          申请时间：{{item.applyTime}}
		        </view>
		        <view class="service_box">
		          <view class="service">
		            <image :src="item.avatar" mode=""/>
		            <view class="content">
		              <view class="service_title">
		                <view class="name">{{item.name}} </view> 
		                <image v-if="item.sex==0" src="/static/img/woman.png" mode=""/>
		                <image v-else src="/static/img/man.png" mode=""/>
		              </view> 
		              <text>{{item.age}}岁 {{item.height}}cm {{item.education}}</text> 
		            </view>
		            <view v-if="activeWay=='to'" class="btn" :class="item.status==0?'success':(item.status==1?'fail':'pending')">
		              {{item.status==0?'牵线成功':(item.status==1?'牵线失败':'牵线中')}}
		            </view>
		            <view v-else class="utils">
		              <view class="btn pending" @click="handleDetail(item.applicant)" >
		                看Ta资料
		              </view>
			<!-- 		  <view class="btn " v-if="item.status!=2" :class="item.status==0?'success':(item.status==1?'fail':'')">
						  {{item.status==0?'牵线成功':(item.status==1?'牵线失败':'')}}
					  </view> -->
						<text v-if="item.status!=2" :class="item.status==0?'success':(item.status==1?'fail':'')"> {{item.status==0?'牵线成功':(item.status==1?'牵线失败':'')}}</text>
		            </view>
		          </view>
		          <view class="right" v-if="activeWay=='come'&&item.status==2">
		            <view class="btn agree" @click="handleAgree(item.id)">
		              同意交互微信
		              </view>
		            <view class="btn refuse" @click="handleRefuse(item.id)">
		              残忍拒绝
		            </view>
		          </view>
		        </view>
		      </view>
		    </view>
		  </scroll-view>
		
		<u-popup closeable :show="showAgree" mode='center' @close="closeAgree">
		    <view class="title">牵线成功</view> 
		    <view class="matcher">
		      <image src="/static/img/auth_success.png" mode=""/>
		    </view>
		    <view class="tip">
		      您已同意交换联系方式，该会员将会查看到您的微信号，期待你们开启美妙的沟通之旅！
		      如有任何问题，请随时联系您的红娘。
		    </view>
		    <view class="wx_number">
		      Ta的微信号：<text>{{successWx}}</text> 
		    </view>
		    <button type="primary" @click="closeAgree">确定</button>
		  </u-popup>
		  
		  <u-popup closeable :show="showRefuse" mode='center' @close="closeRefuse">
		    <view class="title">红娘温馨提示</view> 
		    <view class="matcher">
		      <image src="/static/img/tip.png" mode=""/>
		    </view>
		    <view class="tip">
		      您已选择拒绝对方牵线，如希望通过红娘联系对方，做进一步了解，请选择联系专业红娘。
		    </view>
		    <button class="contact" type="primary" @click="matcherHelp">红娘帮我联系对方</button>
		    <button class="refuse" type="primary" @click="closeRefuse">依然残忍拒绝</button>
		  </u-popup>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				activeWay:'to',
				stringList:[],
				showAgree:false,
				showRefuse:false,
				successWx:'15699998888',
				isTrigger: false,
				_freshing: false
			};
		},
		onLoad(option) {
			console.log(option,'option');
			if(option.type=='come'){
			  this.activeWay = 'come'
			}
			this.initString()
		},
		methods:{
			  handleWays(type){
			    this.activeWay = type
			    this.initString()
			  },
			  initString(){
			    let that = this
			    if(this.activeWay=='to'){
			      request(`/bridge/myBridge`).then((res)=>{
			        console.log(res.data.data,'myBridge');
			        that.stringList = res.data.data
					that.isTrigger = false
					that._freshing = false
			      })
			    }else{
			      request(`/bridge/toMyBridge`).then((res)=>{
			        console.log(res.data.data,'myBridge');
			        that.stringList = res.data.data
					that.isTrigger = false
					that._freshing = false
			      })
			    }
			  },
			  handleRefresh() {
			  	if (this._freshing) return
			  	this._freshing = true
			  	this.isTrigger = true;
			  	this.initString()
			  },
			  handleAgree(id){
			    this.showAgree = true
			    let that = this
			    request(`/bridge/agree?id=${id}`).then((res)=>{
			      console.log(res.data.data,'myBridge');
			      that.successWx = res.data.data
			      this.initString()
			    })
			  },
			  handleRefuse(id){
			    this.showRefuse = true
			    let that = this
			    request(`/bridge/disagree?id=${id}`).then((res)=>{
			      console.log(res.data.data,'myBridge');
			      this.initString()
			    })
			  },
			  matcherHelp(){
			    this.showRefuse = false
			  },
			  handleDetail(id){
			    uni.navigateTo({
			      url: `/pages/linkPage/userDetail/userDetail?id=${id}`
			    })
			  },
			  closeAgree(){
			    this.showAgree = false
			  },
			  closeRefuse(){
			    this.showRefuse = false
			  },
		}
	}
</script>

<style lang="scss">
@import "@/style/mstcher.scss";

.ways{
  display: flex;
  overflow: auto;
  flex-shrink: 0;
  justify-content: space-around;
  border-radius: 50rpx;
  color: rgba(102, 102, 102, 1);
  // background-color: greenyellow;
  margin-top: 50rpx;
  .way{
    margin-right: 25rpx;
    min-width: 200rpx;
    padding: 0 30rpx;
    line-height: 65rpx;
	font-size: 28rpx;
    text-align: center;
    color: rgba(166, 166, 166, 1);
    border-radius: 50rpx;
    background-color: rgba(242, 242, 242, 1);
  }
  view{
	  font-size: 32rpx;
  }
  .active{
    color: #fff;
    background-color: rgba(156, 156, 255, 1);
  }
}
.service_list{
  margin-top: 40rpx;
  .service_item{
    margin-top: 30rpx;
    .apply_time{
      display: flex;
      align-items: center;
      font-size: 24rpx;
      line-height: 40rpx;
      color: rgba(102, 102, 102, 1);
      .point{
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        background-color: rgba(156, 156, 255, 1);
      }
    }
    .service_box{
      padding:30rpx;
      border-radius: 60rpx;
      background-color: rgba(235, 235, 255, 1);
      margin-top: 20rpx;
      .service{
        display: flex;
        justify-content: space-between;
        align-items: center;
        >image{
          width: 100rpx;
          height: 100rpx;
          margin-right: 40rpx;
          border-radius: 50%;
        }
        .content{
          flex: 1;
          height: 76rpx;
          color: rgba(102, 102, 102, 1);
          line-height: 28rpx;
		  text{
			  font-size: 24rpx;
		  }
          .service_title{
            display: flex;
            align-items: center;
            font-weight: 500;
            line-height: 40rpx;
            margin-bottom: 10rpx;
            .name{
				color: rgba(51, 51, 51, 1);
				font-weight: 500;
				line-height: 46rpx;
              max-width: 200rpx;
              white-space: nowrap; /* 确保文本在一行内显示 */
              overflow: hidden; /* 隐藏溢出的内容 */
              text-overflow: ellipsis; 
            }
            image{
              width: 40rpx;
              height: 40rpx;
              margin: 0 10rpx;
            }
          }
        }
        .utils{
          text{
            display: block;
            font-size: 24rpx;
            margin: 0 auto;
            line-height: 34rpx;
            font-weight: 500;
            text-align: center;
            margin-top: 20rpx;
          }
        }
        .btn{
          font-size: 20rpx;
          // padding: 0 30rpx;
		  width: 120rpx;
          height: 52rpx;
          text-align: center;
          line-height: 52rpx;
          border-radius: 60rpx;
        }
        .pending{
          color: white;
          background-color: rgba(156, 156, 255, 1);;
        }
        .fail{
          color: white;
          background-color: rgba(255, 89, 89, 1)
        }
        .success{
          color: rgba(0, 153, 61, 1);
          background-color: rgba(146, 232, 181, 1);
        }
      }
      .right{
        display: flex;
        margin-top: 20rpx;
        justify-content: space-between;
        .btn{
          width: 48%;
          font-size: 24rpx;
          text-align: center;
          line-height: 46rpx;
          border-radius: 60rpx;
          background-color: rgb(155, 72, 72);
        }
        .agree{
          color: rgba(0, 153, 61, 1);
          background-color: rgba(146, 232, 181, 1);
        }
        .refuse{
          color: rgba(255, 66, 66, 1);
          background-color: rgba(255, 181, 181, 1);
        }
      }
    }
  }
}
.u-popup /deep/ .u-popup__content{
  .matcher {
    image{
      width: 112rpx !important;
      height: 112rpx !important;
      margin-top: 30rpx;
    }
  }
  .tip{
    text-align: start;
    margin-top: 50rpx;
    color: rgba(51, 51, 51, 1);
  }
  .wx_number{
    border-radius: 20rpx;
    font-size: 28rpx;
    line-height: 96rpx;
	color: rgba(51, 51, 51, 1);
    margin-top: 65rpx;
    background-color: rgba(245, 245, 255, 1);
	text{
		color: rgba(107, 107, 255, 1);
	}
  }
  .contact{
    bottom: 150rpx;
  }
  .refuse{
    color: rgba(156, 156, 255, 1);
    background-color: rgba(235, 235, 255, 1) !important;
  }
}
.scroll{
  height: 78vh;
  margin-top: 0rpx;
}
</style>
